<template>
  <div class="weixiaodian">
    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <div style="padding: 30px;">
          <div class="kflex">
            <div>
              <div @click="act = 1" :class="act == 1 ? 'wxdli2' : 'wxdli'">商城首页设置</div>
              <div @click="act = 2" :class="act == 2 ? 'wxdli2' : 'wxdli'">下单成功页设置</div>
              <div @click="act = 3" :class="act == 3 ? 'wxdli2' : 'wxdli'">分享店铺海报</div>
              <div @click="act = 4" :class="act == 4 ? 'wxdli2' : 'wxdli'">联系客服设置</div>
              <div @click="act = 5" :class="act == 5 ? 'wxdli2' : 'wxdli'">下单配置</div>
              <div @click="act = 6" :class="act == 6 ? 'wxdli2' : 'wxdli'">商品屏蔽</div>
              <div @click="act = 7" :class="act == 7 ? 'wxdli2' : 'wxdli'">订单查询配置</div>
            </div>
            <div style="width: 1px; background: #ccc; margin: 0 30px;"></div>

            <div style="width: 500px;" v-if="act != 6 && act != 7">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                <div v-show="act == 1">

                  <el-form-item label="店铺名及评分">
                      <el-switch v-model="ruleForm.store_name_display" :active-value="1" active-color="#2974FF" :inactive-value="0"></el-switch>
                  </el-form-item>
                  <el-form-item label="店铺名称" prop="name">
                      <el-input v-model="ruleForm.name" placeholder="请输入店铺名称" style="width: 280px;"></el-input>
                  </el-form-item>
                  <el-form-item label="店铺评分模块">
                      <el-switch v-model="ruleForm.score_display" :active-value="1" active-color="#2974FF" :inactive-value="0"></el-switch>
                  </el-form-item>
                  <el-form-item label="用户归属地跟踪">
                    <div class="outer">
                        <el-tooltip class="item" effect="dark" content="根据用户的IP地址解析用户所在地区，并自动筛选相应地区套餐，如果没有则展示全国。" placement="top">
                          <div class="outer_prompt">?</div>
                        </el-tooltip>
                      <el-switch v-model="ruleForm.belong_display" :active-value="1" active-color="#2974FF" :inactive-value="0"></el-switch>
                    </div>
                  </el-form-item>
                  <el-form-item label="广告图" >
                    <chuantu ref="chuantu" @getimg="getimg" :imgs="ruleForm.adv_img" v-if="relo"></chuantu>
                    <div style="font-size: 12px; color: #999;">广告图尺寸为1290*682</div>
                  </el-form-item>
                  <el-form-item label="联系客服">
                      <el-switch v-model="ruleForm.kf_display"  placeholder="请输入联系客服设置"  active-color="#2974FF" :active-value="1" :inactive-value="0"></el-switch>
                      <div style="color: rgb(142, 142, 142); font-size: 12px; ">控制联系客服悬浮按钮的展示，如开启请设置联系服务内容</div>
                  </el-form-item>

                </div>
                <div v-show="act == 2">
                  <el-form-item label="下单成功话术" >
                      <el-input v-model="ruleForm.order_word" placeholder="请输入下单成功话术" style="width: 280px;"></el-input>
                  </el-form-item>
                  <el-form-item label="二维码展示" >
                    <chuantu ref="chuantu" @getimg="getimg2"  :imgs="ruleForm.order_qrcode" v-if="relo"></chuantu>
                  </el-form-item>
                  <el-form-item label="二维码说明" >
                      <el-input v-model="ruleForm.qrcode_description" placeholder="请输入二维码说明" style="width: 280px;"></el-input>
                  </el-form-item>
                  <el-form-item label="客服联系方式" >
                      <el-input v-model="ruleForm.order_kf_contact_way"  placeholder="请输入客服联系方式" style="width: 280px;"></el-input>
                  </el-form-item>
                </div>

                <div v-show="act == 3">
                  <el-form-item label="选择模版" >
                      <el-select v-model="ruleForm.share_template" @change="changes()" style="width: 280px;" placeholder="">
                        <el-option  label="模板1" :value="1"> </el-option>
                        <el-option  label="模板2" :value="2"> </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="选择图片" >
                    <chuantu ref="chuantu" @getimg="getimg3" :imgs="ruleForm.share_img" v-if="relo"></chuantu>
                    <div style="font-size: 12px; margin:10px 0;  color: #999;">最佳尺寸：750*1334</div>

                  </el-form-item>
                  <el-form-item label="编辑文字" >
                      <el-input v-model="ruleForm.share_content" maxlength="15" placeholder="请输入编辑文字" style="width: 280px;"></el-input>
                  </el-form-item>
                  <el-form-item label="文字颜色" >
                      <el-color-picker v-model="ruleForm.share_content_color"  placeholder="请选择文字颜色"></el-color-picker>
                  </el-form-item>
                </div>

                <div v-show="act == 4">
                  <el-form-item label="客服电话显示">
                      <el-switch v-model="ruleForm.kf_phone_display" active-color="#2974FF"  placeholder="请输入客服电话显示" :active-value="1" :inactive-value="0"></el-switch>
                  </el-form-item>
                  <el-form-item label="联系电话" >
                      <el-input v-model="ruleForm.kf_phone" style="width: 280px;" placeholder="请输入联系电话"></el-input>
                  </el-form-item>
                  <el-form-item label="电话备注" >
                      <el-input v-model="ruleForm.kf_phone_remark"  style="width: 280px;" placeholder="请输入电话备注"></el-input>
                  </el-form-item>

                  <el-form-item label="客服跳转开关">
                      <el-switch v-model="ruleForm.kf_jump_url_display" active-color="#2974FF" :active-value="1" :inactive-value="0"></el-switch>
                  </el-form-item>
                  <el-form-item label="客服跳转链接" v-if="ruleForm.kf_jump_url_display">
                      <el-input v-model="ruleForm.kf_jump_url" style="width: 280px;"   placeholder="请输入跳转链接"></el-input>
                  </el-form-item>

                  <el-form-item label="在线客服显示">
                      <el-switch v-model="ruleForm.online_kf_display" active-color="#2974FF" :active-value="1" :inactive-value="0"></el-switch>
                  </el-form-item>
                  <el-form-item label="微信二维码" >
                    <chuantu ref="chuantu" @getimg="getimg4" :imgs="ruleForm.kf_qrcode" v-if="relo"></chuantu>
                  </el-form-item>

                  <el-form-item label="工作时间">
                      <el-input v-model="ruleForm.online_kf_work_time" style="width: 280px;"   placeholder="请输入工作时间"></el-input>
                  </el-form-item>
                  <el-form-item label="备注信息">
                      <el-input v-model="ruleForm.online_kf_remark" style="width: 280px;"  placeholder="请输入备注信息"></el-input>
                  </el-form-item>
                  <el-form-item label="常见问题展示">
                      <el-switch v-model="ruleForm.problem_display" active-color="#2974FF" :active-value="1" :inactive-value="0"></el-switch>
                  </el-form-item>

                  <div v-for="(item,index) in ruleForm.problem" :key="index" style=" border: 1px dashed #999; padding: 20px 20px 20px 0; position: relative; margin-bottom: 15px;">
                    <div style="position: absolute; right: -10px; top: -10px;"><i class="el-icon-error" style="font-size: 20px; cursor: pointer;" @click="shanchu(index)"></i></div>
                    <el-form-item label="问题">
                        <el-input v-model="item.title" style="width: 280px;"></el-input>
                    </el-form-item>
                    <el-form-item label="问题答案">
                        <el-input v-model="item.content" style="width: 280px;"></el-input>
                    </el-form-item>
                  </div>

                  <div class="kflexcc" style="margin-top: 30px; font-size: 14px; font-weight: bold; color: rgb(0, 79, 253);" @click="jiachangjian">+添加常见问题</div>
                </div>

                <div v-show="act == 5">
                  <el-form-item label="需验证码下单">

                      <el-switch v-model="ruleForm.verify_code" active-color="#2974FF"  placeholder="请输入客服电话显示" :active-value="1" :inactive-value="0"></el-switch>
                  </el-form-item>
                  <el-form-item label="请选择签名">
                      <el-select v-model="ruleForm.sign" placeholder="请选择签名：" >
                        <el-option :label="item2.name" :value="item2.id" v-for="item2 in signlist" :key="item2.id"></el-option>
                      </el-select>
                  </el-form-item>
                </div>
              </el-form>
              <!-- 2024/10.24 王春皓增加 v-if="act != 6 && act !=7" -->
              <div class="kflexcc" style="margin-top: 30px;" v-if="act != 6 && act !=7"><el-button type="danger" size="medium"  style="background: #2974FF; padding: 10px 35px;" @click="baocun">保存</el-button></div>
            </div>
              <!-- 2024/10.24 王春皓增加 v-show="act != 6 && act !=7" -->

            <div style="width: 1px; background: #ccc; margin: 0 30px;" v-show="act != 5 && act != 6 && act !=7"> </div>


            <div style="width: 375px; margin-left: 30px; border: 1px #ddd solid; min-height: 600px;" v-show="act == 1">
              <div style="text-align: center; padding: 10px; font-size: 14px; border-bottom: 1px #ddd solid;">{{ruleForm.name}}</div>

              <div style="position: relative;" >
                <img :src="ruleForm.adv_img" style="width: 100%;">
                <div v-if="ruleForm.store_name_display" class="kflexbc" style="background: rgb(255, 255, 255,0.8); border-radius: 20px 20px 0 0; position: absolute; bottom: 0; left: 15px; width: 340px; padding:10px 15px; box-sizing: border-box;">
                  <div class="kflex">
                    <div style="margin: 0 10px;"><img src="http://test91.91haoka.cn/1715235328uHZ50481.jpg"></div>
                    <div style="font-size: 12px;" class="kflexc">{{ruleForm.name}}</div>
                  </div>
                  <div class="kflexc" v-if="ruleForm.score_display"><img src="http://test91.91haoka.cn/1715235354poo50481.jpg" style="width: 200px;"></div>
                </div>
              </div>

              <div style="position: relative;">
                <div style="position: absolute; top: 270px; right: -7px;" v-if="ruleForm.kf_display">
                  <img src="https://test91.91haoka.cn/1715242423D8z50481.jpg" style="width: 100px;">
                </div>
                <img src="../../../static/weixiaodian/shouye.png" style="width: 100%;">
              </div>
            </div>

            <div style="width: 375px; margin-left: 30px; border: 1px #ddd solid; min-height: 600px; padding-bottom: 50px;" v-show="act == 2">
              <div style="text-align: center; padding: 10px; font-size: 14px; border-bottom: 1px #ddd solid;">{{ruleForm.name}}</div>
              <div style="position: relative;">
                <div class="kflexcc">
                  <img src="http://test91.91haoka.cn/1715235383dio50481.jpg" style="width: 93px; margin-top: 55px;">
                </div>
                <div style="text-align: center; color: rgb(51, 51, 51); font-size: 18px; font-weight: 700; margin: 15px 0 10px;">下单成功</div>
                <div style="font-size: 12px; color: rgb(153, 153, 153); text-align: center;">{{ruleForm.order_word || '下单成功话术位置'}}</div>
                <div style="border-radius: 43px;box-shadow: 0px 2px 22px 0px rgba(255, 0, 89, 0.18);background: rgb(255, 6, 57); font-size: 18px; color: #fff; width: 315px; margin: 30px auto; margin-bottom: 90px; line-height: 44px; text-align: center;">查看订单</div>
                <div class="kflexcc"><img :src="ruleForm.order_qrcode" style="width: 160px; padding: 20px; box-shadow: 0px 3px 20px 0px rgba(200, 215, 234, 0.4);"></div>
                <div style="font-size: 12px; color: rgb(153, 153, 153); margin-top: 20px; text-align: center;">{{ruleForm.qrcode_description || '二维码说明展示位置'}}</div>
                <div style="font-size: 12px; color: rgb(153, 153, 153); margin-top: 10px; text-align: center;">{{ruleForm.order_kf_contact_way || '客服联系方式展示位置'}}</div>
              </div>
            </div>


            <div style="width: 375px; margin-left: 30px; border: 1px #ddd solid; min-height: 600px; border-radius: 30px; overflow: hidden;" v-show="act == 3">
              <div style="text-align: center; padding: 10px; font-size: 14px; border-bottom: 1px #ddd solid;">{{ruleForm.name}}</div>

              <div style="padding: 15px; background: rgb(246, 250, 255); " id="content"  v-show="ruleForm.share_template == 1">
                <div style="background: #fff;">
                  <div class="kflexcc">
                    <img :src="ruleForm.share_img" style="width: 100%; border-radius: 15px;">
                  </div>
                  <div class="kflexbc" style="padding: 15px;">
                    <div>
                      <div style=" width: 200px; font-size: 12px; line-height: 20px; max-height: 40px; overflow: hidden;" :style="{color:ruleForm.share_content_color}">
                        {{ruleForm.share_content}}
                      </div>
                      <div class="kflexc" style="margin: 10px 0;">
                        <div style="margin-right: 10px;"><img src="http://test91.91haoka.cn/1715235328uHZ50481.jpg"></div>
                        <div style="font-size: 14px;" class="kflexc">{{ruleForm.name}}</div>
                      </div>
                      <div style="font-size: 12px; color: #999; " class="kflexc">长按识别二维码进入下单链接</div>
                    </div>
                    <div>
                      <div ref="qrCodeUrl2" id="qrCodeUrl2" style="width: 100px;"></div>
                    </div>
                  </div>
                </div>
              </div>

              <div v-show="ruleForm.share_template == 2" style="background: rgb(246, 250, 255); padding: 15px;">
                <div style="background: #fff; position: relative; overflow: hidden; border-radius: 15px; min-height:190px"  id="content2">

                  <img :src="ruleForm.share_img" style="width: 100%; border-radius: 15px; overflow: hidden;" ref="imgh">

                  <div style="position: absolute; left: 0; width: 100%;" :style="{'top':topf}">
                    <div class="kflexcc">
                      <div>
                        <div ref="qrCodeUrl3" id="qrCodeUrl3"  class="kflexcc" style="padding: 10px; background: #fff; border-radius: 15px;"></div>
                        <div style="color: rgb(175, 179, 188); font-size: 10px; margin-top: 10px; line-height: 18px; background: #fff; width: 150px; text-align: center; border-radius: 9px;">长按识别二维码进入下单链接</div>
                      </div>
                    </div>
                  </div>

                  <div class="kflexbc" style="padding: 15px;">
                    <div>
                      <div class="kflexc" style="margin: 10px 0;">
                        <div style="margin-right: 10px;"><img src="http://test91.91haoka.cn/1715235328uHZ50481.jpg"></div>
                        <div style="font-size: 14px;" class="kflexc">{{ruleForm.name}}</div>
                      </div>
                      <div style=" width: 200px; font-size: 12px; line-height: 20px; max-height: 40px; overflow: hidden;" :style="{color:ruleForm.share_content_color}">
                        {{ruleForm.share_content}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="kflexcc" style="margin-top: 30px;">
                <div @click="shengchengtupian()" style="width: 165px; line-height: 40px; border-radius: 20px; background: rgb(0, 90, 255); color: #fff; text-align: center; margin-right: 20px;">保存图片</div>
                <div style="width: 165px; line-height: 40px; border-radius: 20px; background: rgb(228, 237, 255); color: rgb(0, 90, 255);; text-align: center;">复制链接</div>
              </div>
            </div>

            <div style="width: 375px; margin-left: 30px; border: 1px #ddd solid; min-height: 600px;" v-show="act == 4">
              <div style="text-align: center; padding: 10px; font-size: 14px; border-bottom: 1px #ddd solid;">{{ruleForm.name}}</div>
              <div style="padding: 15px; background: url('http://test91.91haoka.cn/1715238841gqZ50481.jpg') no-repeat; min-height: 500px; background-size: 100% auto; padding-top: 120px;">

                <div style="background: #fff; width: 340px; margin: 0 auto; border-radius:20px; padding: 20px; margin-bottom: 15px; box-sizing: border-box;" v-if="ruleForm.kf_phone_display">
                  <div class="kflex">
                    <div><img src="http://test91.91haoka.cn/1715239604vD050481.jpg" style="width: 46px; margin-right: 13px;"></div>
                    <div>
                      <div style="color: rgb(51, 51, 51); margin-bottom: 10px;">{{ruleForm.kf_phone}}</div>
                      <div style="color: rgb(102, 102, 102); font-size: 14px;">{{ruleForm.kf_phone_remark}}</div>
                    </div>
                  </div>
                </div>

                <div style="background: #fff; width: 340px; margin: 0 auto; border-radius:20px; padding: 20px;  margin-bottom: 15px; box-sizing: border-box;" v-if="ruleForm.online_kf_display">
                  <div class="kflex">
                    <div><img src="http://test91.91haoka.cn/1715239631K7n50481.jpg" style="width: 46px; margin-right: 13px;"></div>
                    <div>
                      <div style="color: rgb(51, 51, 51); margin-bottom: 10px;">在线客服</div>
                      <div style="color: rgb(102, 102, 102); font-size: 14px;">工作时间：{{ruleForm.online_kf_work_time}}</div>
                    </div>
                    <div class="kflexcc" style="width: 100%;"><img :src="ruleForm.kf_qrcode" style="width: 160px; margin: 30px; padding: 20px; box-shadow: 0px 3px 20px 0px rgba(200, 215, 234, 0.4);"></div>

                    <div style="color: rgb(102, 102, 102); font-size: 12px; width: 100%; text-align: center;">{{ruleForm.online_kf_remark}}</div>
                  </div>
                </div>
                <div style="background: #fff; width: 340px; margin: 0 auto; border-radius:20px; padding: 20px;  box-sizing: border-box;" v-if="ruleForm.problem_display">
                  <div style="margin-bottom: 20px;">常见问题</div>

                  <div v-for="(item,index) in ruleForm.problem" :key="index" style=" margin-bottom: 15px;">
                    <div style="font-size: 14px; color: #666; margin-bottom: 5px;">{{item.title}}</div>
                    <div style="font-size: 12px; color: #999;">{{item.content}}</div>
                  </div>

                </div>
              </div>
            </div>

            <div style="width: 375px; margin-left: 30px; border: 1px #ddd solid; min-height: 600px;" v-show="act == 5">

            </div>
            <!--wch act == 6 -->
             <div style="width: calc(100% - 300px); margin-left: 30px; min-height: 600px;" v-show="act == 6">
               <shieldList />
            </div>
            <!--wch act == 7 -->
            <div v-show="act == 7" style="margin-left: 30px;min-height: 600px;">
              <disposition  :ruleForm="ruleForm"/>
            </div>
          </div>

        </div>
      </div>
    </div>

    <el-dialog title="发布消息" center :close-on-click-modal="false" :visible.sync="log" width="800px">
      <div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="f1">常见问题标题：</div>
          <div class="f2">
            <el-input v-model="wenti.title" style="width: 400px;" maxlength="50" placeholder="常见问题标题"></el-input>
          </div>
        </div>
        <div class="kflexc">
          <div class="f1">常见问题内容：</div>
          <div class="f2">
            <el-input v-model="wenti.content" style="width: 400px;" maxlength="50" placeholder="常见问题内容"></el-input>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" round @click="log = false">取 消</el-button>
        <el-button type="primary" round @click="wentijia">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  import chuantu from "@/components/zujian/chuantu.vue";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import shieldList from './shieldList.vue'
  import disposition from './disposition.vue'
  export default {
    components: {
      "left": left,
      "top": top,
      chuantu,
      shieldList,
      disposition
    },
    name: "weixiaodian",
    data() {
      return {
        act:1,
        ruleForm: {
          // "name": "",
          // "score_display": 1,
          // "adv_img": "http://test91.91haoka.cn/1715234093XSj50481.jpg",
          // "kf_display": 1,
          // "order_word": "",
          // "order_qrcode": "http://test91.91haoka.cn/17152437194VM50481.jpg",
          // "qrcode_description": "",
          // "order_kf_contact_way": "",
          // "share_template": "",
          // "share_img": "http://test91.91haoka.cn/1715234093XSj50481.jpg",
          // "share_qrcode": "",
          // "share_content": "",
          // "share_content_color": "",
          // "kf_phone_display": 1,
          // "kf_phone": "",
          // "kf_phone_remark": "",
          // "online_kf_display": 1,
          // "kf_qrcode": "http://test91.91haoka.cn/1715246025eTm50481.jpg",
          // "online_kf_work_time": "",
          // "online_kf_remark": "",
          // "problem_display": 1,
          // "problem": []
        },
        relo:false,
        rules: {
          // name: [
          //   { required: true, message: '请输入店铺名称', trigger: 'blur' },
          // ]
        },
        log:false,
        wenti:{
          title:"",
          content:""
        },
        topf:'50%',
        signlist:[]
      }
    },
    created() {
      this.getinfo()
      this.getsign()
      this.ruleForm.name = JSON.parse(localStorage.getItem('SHOP')).shop_name
    },


    mounted() {
      let id  = JSON.parse(localStorage.getItem('SHOP')).shop_id
      let copyurl = location.origin + '/webapp/weixiaodian/index.html?shop_id=' + id

      this.$refs.qrCodeUrl2.innerHTML = '';
      var qrcode = new QRCode(this.$refs.qrCodeUrl2, {
          text: copyurl, // 需要转换为二维码的内容
          width: 100,
          height: 100,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
      })

      var qrcode2 = new QRCode(this.$refs.qrCodeUrl3, {
          text: copyurl, // 需要转换为二维码的内容
          width: 120,
          height: 120,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
      })
    },
    methods: {
      getsign:function(){

        this.axios.get(`/api/plan-market/message/getsign`)
          .then(response => {
            if(response.data.msg.code == 0){
              this.signlist = response.data.data
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },
      wentijia:function(){
        if(this.wenti.title == '' || this.wenti.content == ''){
          this.$message.error('请输入完整内容');
        }else{
          this.ruleForm.problem.push(this.wenti)
          this.log = false
        }
      },
      shanchu:function(index){
        this.ruleForm.problem.splice(index,1)
      },
      jiachangjian:function(){
        this.ruleForm.problem.push(
          {
            title:"",
            content:""
          }
        )
        // this.wenti = {
        //   title:"",
        //   content:""
        // }
        // this.log = true
      },
      shengchengtupian:function(){
        var element2 = document.getElementById('content');
        if(this.ruleForm.share_template == 2){
          element2 = document.getElementById('content2');
        }

        html2canvas(element2,{
              useCORS: true, // 这个选项会自动处理跨域问题
              // scale: 1,//图片清晰度，越高越清楚，图片质量越大
              backgroundColor: null,//画出来的图片有白色的边框,不要可设置背景为透明色（null）
        }).then(canvas => {
              // 将图像添加到DOM中
              var a = document.createElement("a");
                      document.body.appendChild(a);
                      a.href = canvas.toDataURL('image/png');
                      a.download = "";
                      a.click();
        });
      },
      getinfo:function(){
        this.axios.get('/api/plan-market/order-page/mini-store/info')
          .then(response => {
            if (response.data.msg.code == 0) {
              if(response.data.data == null){
                this.ruleForm = {
                  "belong_display":1,
                  "name": "",
                  "score_display": 1,
                  "adv_img": "http://test91.91haoka.cn/1715234093XSj50481.jpg",
                  "kf_display": 1,
                  "order_word": "",
                  "order_qrcode": "",
                  "qrcode_description": "",
                  "order_kf_contact_way": "",
                  "share_template": "",
                  "share_img": "http://test91.91haoka.cn/1715234093XSj50481.jpg",
                  "share_qrcode": "",
                  "share_content": "",
                  "share_content_color": "",
                  "kf_phone_display": 1,
                  "kf_phone": "",
                  "kf_phone_remark": "",
                  "online_kf_display": 1,
                  "kf_qrcode": "",
                  "online_kf_work_time": "",
                  "online_kf_remark": "",
                  "problem_display": 1,
                  "problem": [],
                  kf_jump_url:"",
                  store_name_display:1,
                  kf_jump_url_display:1
                }
                this.ruleForm.name = JSON.parse(localStorage.getItem('SHOP')).shop_name
                this.relo = true

                var that = this
                var img = new Image()
                img.src = that.ruleForm.share_img

                img.onload = function (){
                  let h = img.height/(img.width / 345)
                  that.topf = (parseInt((h-169))/2)+'px'
                }

              }else{
                this.ruleForm = response.data.data
                // if(!this.ruleForm.adv_img){
                //   this.ruleForm.adv_img = 'http://test91.91haoka.cn/1715234093XSj50481.jpg'
                // }
                // if(!this.ruleForm.shop_name){
                //   this.ruleForm.name = JSON.parse(localStorage.getItem('SHOP')).shop_name
                // }
                if(!this.ruleForm.share_template){
                  this.ruleForm.share_template = 1
                }else{
                  this.ruleForm.share_template = parseInt(this.ruleForm.share_template)
                }
                // if(!this.ruleForm.share_img){
                //   this.ruleForm.share_img = 'http://test91.91haoka.cn/1715234093XSj50481.jpg'
                // }
                this.relo = true

                var that = this
                var img = new Image()
                img.src = that.ruleForm.share_img

                img.onload = function (){
                  let h = img.height/(img.width / 345)
                  that.topf = (parseInt((h-169))/2)+'px'
                }

              }




            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      baocun:function(){

        this.axios.post('/api/plan-market/order-page/mini-store/set',this.ruleForm)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('保存成功');
              this.getinfo()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      getimg:function(img){
        this.ruleForm.adv_img = img
        if(img){
          this.$message.success('上传成功');
        }

      },
      getimg2:function(img){
        this.ruleForm.order_qrcode = img
        if(img){
          this.$message.success('上传成功');
        }
      },
      getimg3:function(img){
        this.ruleForm.share_img = img
        if(img){
          this.$message.success('上传成功');
        }
        var that = this
        var img = new Image()
        img.src = that.ruleForm.share_img

        img.onload = function (){
          let h = img.height/(img.width / 345)
          that.topf = (parseInt((h-169))/2)+'px'
        }
      },
      getimg4:function(img){
        this.ruleForm.kf_qrcode = img
        if(img){
          this.$message.success('上传成功');
        }
      },

      changes:function(){

      }
    }
  }
</script>

<style lang="scss" scoped>
.outer{
  display: flex;
  align-items: center;
  margin-top: 6px;
 &_prompt{

  width: 25px;
  height: 25px;
  color: white;
  border-radius: 50%;
  background: #ccc;
  line-height: 25px;
  text-align: center;
  margin-left: 5px;
  margin-right: 10px;
 }
}

  .weixiaodian{
    /deep/ .el-input__inner{ border-radius: 10px; background: rgb(245, 245, 245);}
  }

  .wxdli{border-radius: 10px; width: 160px; text-align: center; line-height: 40px; margin-bottom: 20px; background: #fff; color: #000; cursor: pointer;}
  .wxdli2{
    border-radius: 10px; width: 160px; text-align: center; line-height: 40px; margin-bottom: 20px;
    background: #2974FF;
    color: #fff;
  }

</style>
